<template>
  <div class="home-wrapper">
    <div class="date-row">
      <div class="data-col">
        <el-card shadow="always" :body-style="{ padding: '0px' }">
          <div class="home_top_box">
            <div class="devleng" id="alldev">
              <i class="fa fa-cogs el-icon-setting"></i>
              <h3>设备总数</h3>
              <span>{{ sbNum.deviceNum }}</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="data-col">
        <el-card shadow="always" :body-style="{ padding: '0px' }">
          <div class="home_top_box">
            <div class="devon" id="onlinedev">
              <i class="fa fa-leaf el-icon-paperclip"></i>
              <h3>在线设备</h3>
              <span>{{ sbNum.onlineNum }}</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="data-col">
        <el-card shadow="always" :body-style="{ padding: '0px' }">
          <div class="home_top_box">
            <div class="devalarm" id="alarmdev">
              <i class="fa fa-bell-o el-icon-bell"></i>
              <h3>报警设备</h3>
              <span>{{ sbNum.alarmNum }}</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="data-col">
        <el-card shadow="always" :body-style="{ padding: '0px' }">
          <div class="home_top_box">
            <div class="devoff" id="offlineDev">
              <i class="fa fa-plug el-icon-news"></i>
              <h3>离线设备</h3>
              <span>{{ sbNum.offlineNum }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <el-row class="date-box" :gutter="20">
      <el-col :span="6">
        <el-card shadow="always" :body-style="{ padding: '0px' }">
          <div class="list_item">
            <div class="title">设备列表</div>
            <div class="scroll_box">
              <EleTree
                v-if="isTree"
                :treeData="treeData"
                v-on:listenToChildEvent="changeList"
              />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" class="map" :class="isBig ? 'map_big' : ''">
        <el-card shadow="always" :body-style="{ padding: '0px' }">
          <div class="list_item">
            <div class="title">
              地图信息
              <span class="openbig" title="放大" @click="openBig('map')"
                ><i class="el-icon-money"></i
              ></span>
            </div>
            <div class="map_box">
              <Map v-if="isMap" :geoData="geoData" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" class="sb_box">
        <el-card shadow="always" :body-style="{ padding: '0px' }">
          <div class="list_item">
            <div class="title">
              设备信息
              <el-popover
                  class="yz_pop openbig"
                  placement="right"
                  width="104"
                  trigger="click"
                >
                  <div class="yz_btnlist">
                    <div @click="openCz()">继电器操作</div>
                    <div @click="openCzjl()">继电器操作记录</div>
                  </div>

                  <el-button slot="reference"><i class="el-icon-s-tools"></i></el-button>
              </el-popover>
            </div>
            <div class="map_box">
              <div class="info_list">
                <span>设备名称:</span>{{ sbData.deviceName }}
              </div>
              <div class="info_list">
                <span>设备地址:</span>{{ sbData.deviceAddr }}
              </div>
              <div class="info_list">
                <span>报警数据:</span
                >{{ sbData.alarmRecord == 0 ? "不保存" : "保存" }}
              </div>
              <div class="info_list">
                <span>报警类型:</span>
                <div style="display: inline-block;" v-if="sbData.alarmSwitch === '1'">
                  离线报警
                  </div>
                  <div style="display: inline-block;" v-else-if="sbData.alarmSwitch === '2'">
                    超限报警
                  </div>
                  <div style="display: inline-block;" v-else>
                    离线报警、超限报警
                  </div>
              </div>
              <div class="info_list">
                <span>标记位置:</span
                >{{ sbData.useMarkLocation ? "开启" : "关闭" }}
              </div>
              <div class="info_list">
                <span>离线判断间隔:</span>{{ sbData.offlineInterval }}分钟
              </div>
              <div class="info_list">
                <span>保存数据间隔:</span>{{ sbData.saveDataInterval }}分钟
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <div class="list_box" :class="isYzBig ? 'map_big' : ''">
        <el-card shadow="always" :body-style="{ padding: '0px' }">
          <div class="list_item">
            <div class="title">
              因子信息
              <span class="openbig" title="放大" @click="openBig('yinzi')"
                ><i class="el-icon-money"></i
              ></span>
            </div>
            <div class="yz_box">
              <div
                class="yz_item"
                v-for="(item, index) in allData.factorInfos"
                :key="index"
              >
                <div class="yz_img">
                  <img src="../assets/img/node0.png" alt="" />
                </div>
                <div class="yz_txt">
                  <p class="yz_title">{{ item.factorName }}({{ item.unit }})</p>
                  <p class="yz_desc">{{item.data}}</p>
                </div>

                <el-popover
                  class="yz_pop"
                  placement="right"
                  width="104"
                  trigger="click"
                >
                  <div class="yz_btnlist">
                    <div @click="openChangeYz(item)">修改因子信息</div>
                  </div>

                  <el-button slot="reference"
                    ><i class="el-icon-search yz_search"></i
                  ></el-button>
                </el-popover>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </el-row>
    <el-dialog title="因子信息" :visible.sync="dialogVisible" width="1000px">
      <div class="yz_form">
        <div class="left_form">
          <el-form class="form-wrapper" label-width="130px">
            <el-form-item label="因子名称:">
              <el-input v-model="yz_data.factorName" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="因子排序:">
              <el-input v-model="yz_data.sort" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="因子单位:">
              <el-input v-model="yz_data.unit" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="系数:">
              <el-input v-model="yz_data.coefficient" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="报警延时(分钟):">
              <el-input v-model="yz_data.alarmDelay" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="复归延时(分钟):">
              <el-input v-model="yz_data.alarmDelay" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="短信最多发送次数:">
              <el-input
                v-model="yz_data.maxSmsAlarmTimes"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="left_form">
          <el-form class="form-wrapper" label-width="130px">
            <el-form-item label="节点编号:">
              <el-input v-model="yz_data.sort" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="数据类型:">
              <el-input v-model="yz_data.sort" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="因子使能:">
              <el-switch
                v-model="yz_data.enabled"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
            <el-form-item label="小数位数:">
              <el-input v-model="yz_data.digits" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="偏差:">
              <el-input v-model="yz_data.offset" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="报警频率(分):">
              <el-input v-model="yz_data.alarmRate" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="语音最多发送次数:">
              <el-input
                v-model="yz_data.maxVoiceAlarmTimes"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >保存</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="继电器操作" :modal-append-to-body="false" :visible.sync="isCz" width="1200px">
     <videoSet />
    </el-dialog>
    <el-dialog title="继电器操作记录 " :modal-append-to-body="false" :visible.sync="isCzjl" width="1200px">
     <Czjl />
    </el-dialog>
  </div>
</template>

<script>
import EleTree from "@/components/tree/EleTree.vue";
import Map from "@/components/map/proMap.vue";
import VideoSet from "../views/video/videoSet.vue";
import Czjl from "../views/dataCenter/czjl.vue";
export default {
  name: "Home",
  components: { EleTree, Map, VideoSet, Czjl },
  data() {
    return {
      isBig: false,
      isYzBig: false,
      userInfo: {},
      treeData: [],
      isTree: false,
      choseId: "",
      allData: {},
      sbData: {
        factors: {},
      },
      yz_data: {},
      dialogVisible: false,
      isCz:false,
      isMap:false,
      isCzjl:false,
      sbNum:{},
      geoData:[],
    };
  },
  mounted() {
    //获取登录用户信息
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    console.log(this.userInfo);
    this.getDeviceTree();
    //获取设备数量
    this.getDeviceNum();
    this.getDeviceGeo();
  },
  methods: {
    //获取设备数量
    getDeviceNum() {
      this.axios
        .request({
          method: "POST",
          url: "http://47.104.26.124:8080/zhny/device/getDeviceNum",
          params: {
            userId: this.userInfo.id,
          },
        })
        .then((res) => {
          console.log(res);
          this.sbNum = res.data.data;

        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取设备坐标
    getDeviceGeo() {
      var that = this;
      this.axios
        .request({
          method: "POST",
          url: "http://47.104.26.124:8080/zhny/device/getDeviceGeo",
          params: {
            userId: this.userInfo.id,
          },
        })
        .then((res) => {
          console.log(res);
          that.geoData = res.data.data;
          that.isMap = true

        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取总数据
    getHomePageInfo() {
      this.axios
        .request({
          method: "POST",
          url: "http://47.104.26.124:8080/zhny/device/getDeviceInfo",
          params: {
            userId: this.userInfo.id,
            address:this.choseId
          },
        })
        .then((res) => {
          console.log(res);
          this.allData = res.data.data;
          var that = this;
          that.sbData = res.data.data.deviceInfo;

        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取设备列表树形图
    getDeviceTree() {
      this.axios
        .request({
          method: "POST",
          url: "http://47.104.26.124:8080/zhny/device/getDeviceTree",
          params: {
            userId: this.userInfo.id,
          },
        })
        .then((res) => {
          this.treeData = res.data.data;
          localStorage.setItem('treeData',JSON.stringify(res.data.data))
          this.isTree = true;
          //默认第一个id设备
          this.choseId = res.data.data[0].children[0].label;
          this.getHomePageInfo();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    openBig(type) {
      if (type == "map") {
        this.isBig = !this.isBig;
      } else {
        this.isYzBig = !this.isYzBig;
      }
    },
    //监听树状图点击事件，切换数据源
    changeList(res) {
      this.choseId = res;
      // var that = this;
      this.getHomePageInfo();
      // this.allData.deviceInfos.forEach(function (e) {
      //   if (e.deviceName == res.label) {
      //     that.sbData = e;
      //   }
      // });
    },
    //打开修改因子弹窗
    openChangeYz(item) {
      this.yz_data = item;
      this.dialogVisible = true;
    },
    openCz(){
      this.isCz = true
    },
    openCzjl(){
      this.isCzjl = true
    }

  },
};
</script>

<style lang="less">
@import "../assets/less/home";
.yz_search {
  cursor: pointer;
}
.yz_pop {
  position: absolute;
  right: 0;
  top: 0;
  .el-button {
    background: none !important;
    border: none !important;
  }
}
.el-popover {
  padding: 8px !important;
}
.yz_btnlist {
  width: 100%;
  div {
    cursor: pointer;
    text-align: center;
    line-height: 30px;
  }
  div:hover {
    background: #eee;
  }
}
.yz_form{
  overflow: hidden;
}
.left_form {
  float: left;
  width: 50%;
}
.el-dialog__body{
  padding: 0 20px;
}
</style>
